<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <script>
    // 1 数字翻倍
    function doubleNumber(v) {
      return v * 2;
    }
    console.log([2, 5, 100].map(doubleNumber)); // [4, 10, 200]

    // 2 数字变字符串
    function stringItUp(v) {
      return v.toString();
    }

    console.log([2, 5, 100].map(stringItUp)); // ["2", "5", "100"]

    // 3 首字母变大写
    function capitalizeName(v) {
      // your code here
      return v.toUpperCase()[0] + v.slice(1).toLowerCase();
    }

    console.log(
      ["john", "JACOB", "jinGleHeimer", "schmidt"].map(capitalizeName)
    ); // ["John", "Jacob", "Jingleheimer", "Schmidt"]

    // 4 只要name属性
    function nameOnly(v) {
      // your code here
      return v.name;
    }

    console.log(
      [
        {
          name: "Angelina Jolie",
          age: 80,
        },
        {
          name: "Eric Jones",
          age: 2,
        },
        {
          name: "Paris Hilton",
          age: 5,
        },
        {
          name: "Kayne West",
          age: 16,
        },
        {
          name: "Bob Ziroll",
          age: 100,
        },
      ].map(nameOnly)
    );
    // ["Angelina Jolie", "Eric Jones", "Paris Hilton", "Kayne West", "Bob Ziroll"]

    // 5 对象变字符串
    function makeStrings(v) {
      // your code here
      // 条件 age > 20
      if (v.age > 20) {
        return v.name + "可以去黑客帝国";
      } else {
        return v.name + "年纪太小";
      }
    }

    console.log(
      [
        {
          name: "Angelina Jolie",
          age: 80,
        },
        {
          name: "Eric Jones",
          age: 2,
        },
        {
          name: "Paris Hilton",
          age: 5,
        },
        {
          name: "Kayne West",
          age: 16,
        },
        {
          name: "Bob Ziroll",
          age: 100,
        },
      ].map(makeStrings)
    );
    // ["Angelina Jolie 可以去黑客帝国。",
    // "Eric Jones 年纪太小!!",
    // "Paris Hilton 年纪太小!!",
    // "Kayne West 年纪太小!!",
    // "Bob Ziroll 可以去黑客帝国。"]

    //6 将object转换成html
    function readyToPutInTheDOM(v) {
      // your code here

      return `<h1>${v.name} </h1><h2>${v.age}</h2>`;
    }
    console.log(
      [
        {
          name: "Angelina Jolie",
          age: 80,
        },
        {
          name: "Eric Jones",
          age: 2,
        },
        {
          name: "Paris Hilton",
          age: 5,
        },
        {
          name: "Kayne West",
          age: 16,
        },
        {
          name: "Bob Ziroll",
          age: 100,
        },
      ].map(readyToPutInTheDOM)
    );
      // ["<h1>Angelina Jolie</h1><h2>80</h2>",
      // "<h1>Eric Jones</h1><h2>2</h2>",
      // "<h1>Paris Hilton</h1><h2>5</h2>",
      // "<h1>Kayne West</h1><h2>16</h2>",
      // "<h1>Bob Ziroll</h1><h2>100</h2>"]
  </script>
</body>

</html>